<template>
    <van-popup v-model:show="open" :close-on-click-overlay="false" teleport="#app" style="background: transparent">
        <div class="referrer-box">
            <van-icon name="cross" @click="open = false" />
            <div class="title">{{ $t('layout.receivingaddress') }}</div>
            <van-field v-model="formData.address" :placeholder="$t('layout.Pleaseenterthereceivingaddress')"></van-field>
            <van-button type="primary" @click="sendRegister" :loading="loading">{{ $t("layout.activation")
            }}</van-button>
        </div>
    </van-popup>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { showToast, showDialog } from "vant";
import { transferNFT } from "@/api";
export default defineComponent({
    emits: ["load"],
    setup(props, ctx) {
        const { t } = useI18n();
        const open = ref(false)
        const loading = ref(false)
        const formData: any = reactive({
            id: "",
            address: ""
        });
        const sendRegister = async (): Promise<void> => {
            if (!formData.address) return
            try {
                const res = await transferNFT(formData)
                if (res.data.code == 20) {
                    ctx.emit("load")
                    showDialog({ title: `${t("layout.success")}` })
                    open.value = false
                } else {
                    showToast(res.data.message)
                }
            } catch (error) {

            }
        };
        const show = (id: number) => {
            open.value = true
            formData.id = id
            formData.address = ""
        }
        onMounted(async () => { });
        return {
            formData,
            sendRegister,
            show,
            open,
            loading
        };
    },
});
</script>
<style lang="less" scoped>
.referrer-box {
    position: relative;
    height: 198px;
    padding: 25px 15px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px 0px 25px 0px rgba(17, 194, 153, 0.11);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);

    .van-icon {
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 14px;
    }

    .title {
        font-size: 18px;
        font-weight: 500;
        text-align: center;
    }

    .van-field {
        margin-top: 20px;
        width: 315px;
        height: 45px;
        color: #fff;
        background: #F6F6F7;
        border-radius: 8px;

        &::after {
            display: none;
        }

        &:deep(.van-cell__value) {
            .van-field__control {
                font-size: 15px;
            }
        }
    }

    .van-button {
        margin-top: 20px;
    }
}
</style>
  